import '../../Utils/FormTemp.scss'
import { InboxOutlined, UploadOutlined } from '@ant-design/icons';
import {
    AutoComplete,
    Button,
    Cascader,
    Form,
    Input,
    InputNumber,
    Select,
    DatePicker,
    TimePicker,
    TreeSelect,
    ColorPicker,
    Upload,
} from 'antd'

import { ICONMapping } from '../../Utils/IconMapping'

import { useState } from 'react'

const { TextArea } = Input

const FormTemplate = () => {
    const onFinish = (values) => {
        console.log('Success:', values);
    }
    const onFinishFailed = (errorInfo) => {
        console.log('Failed:', errorInfo);
    }

    const [autoCompleteResult, setAutoCompleteResult] = useState([]);
    const onWebsiteChange = (value) => {
        if (!value) setAutoCompleteResult([]);
        else setAutoCompleteResult(['.com', '.org', '.net'].map((domain) => `${value}${domain}`));
    }
    const websiteOptions = autoCompleteResult.map((website) => ({ label: website, value: website }))

    const normFile = (e) => {
        console.log('Upload event:', e);
        if (Array.isArray(e)) {
            return e;
        }
        return e?.fileList;
    };


    return (
        <div className='FormTemplate'>
            <Form
                name="basic"
                className='FormTemp'
                initialValues={{ remember: true, }}
                onFinish={onFinish}
                onFinishFailed={onFinishFailed}
                autoComplete="off"
                layout="vertical"
            >
                <Form.Item
                    className='TwoFormItem'
                    tooltip="额外提示信息"
                    label='输入框'
                    name="username1"
                    rules={[{ required: true, message: '必填提示!' }]}
                >
                    <Input placeholder='默认提示' />
                </Form.Item>
                <Form.Item
                    className='TwoFormItem'
                    label='密码框'
                    name="username2"
                    rules={[{ required: true, message: '必填提示!' }]}
                >
                    <Input.Password placeholder='默认提示' />
                </Form.Item>
                <Form.Item
                    className='TwoFormItem'
                    name="username"
                    label="自动完成3"
                    rules={[{ required: true, message: '必填提示!' }]}
                >
                    <AutoComplete options={websiteOptions} onChange={onWebsiteChange} placeholder="默认提示" />
                </Form.Item>
                <Form.Item
                    label="数字输入"
                    className='TwoFormItem'
                    name='username4'
                    rules={[{ required: true, message: '必填提示!' }]}
                >
                    <InputNumber min={1} max={10} placeholder='默认提示' />
                </Form.Item>
                <Form.Item
                    className='TwoFormItem'
                    name="username"
                    label="下拉选择5"
                    rules={[{ required: true, message: '默认提示!' }]}
                >
                    <Select placeholder="默认提示" options={[
                        { value: 'china', label: 'China' },
                        { value: 'usa', label: 'U.S.A' },
                    ]} />
                </Form.Item>
                <Form.Item
                    className='TwoFormItem'
                    label='联级选择'
                    name="username6"
                    rules={[{ required: true, message: '必填提示!' }]}
                >
                    <Cascader
                        placeholder="联级选择"
                        options={[{ value: 'xx', label: 'xx' }]}
                        allowClear
                    />
                </Form.Item>
                <Form.Item
                    className='TwoFormItem'
                    label='树形选择器'
                    name="username7"
                    rules={[{ required: true, message: '必填提示!' }]}
                >
                    <TreeSelect
                        placeholder="默认提示"
                        treeData={[{ value: 'xx', label: 'xx', },]}
                        allowClear
                    />
                </Form.Item>
                <Form.Item
                    className='TwoFormItem'
                    label="日期选择器"
                    name="username8"
                    rules={[{ required: true, message: '必填提示!' }]}
                >
                    <DatePicker />
                </Form.Item>
                <Form.Item
                    className='TwoFormItem'
                    label="时间选择器"
                    name="username9"
                    rules={[{ required: true, message: '必填提示!' }]}
                >
                    <TimePicker />
                </Form.Item>

                <Form.Item
                    className='TwoFormItem'
                    label='颜色选择器'
                    name="username0"
                    rules={[{ required: true, message: '必填提示!' }]}
                >
                    <ColorPicker />
                </Form.Item>
                <Form.Item
                    label="富文本"
                    className='OneFormItem'
                    name="TextArea"
                    rules={[{ required: true, message: '必填提示!' }]}
                >
                    <TextArea autoSize placeholder='默认提示' />
                </Form.Item>
                <Form.Item
                    label="上传"
                    className='OneFormItem'
                    name="Dragger"
                    rules={[{ required: true, message: '必填提示!' }]}
                >
                    <Form.Item
                        noStyle
                        name="Dragger"
                        valuePropName="fileList"
                        getValueFromEvent={normFile}
                    >
                        <Upload.Dragger name="files" action="/upload.do">
                            <p className="ant-upload-drag-icon"><InboxOutlined /></p>
                            <p className="ant-upload-text">单击或拖动文件到此区域进行上传</p>
                            <p className="ant-upload-hint">支持单次或批量上传。</p>
                        </Upload.Dragger>
                    </Form.Item>
                </Form.Item>

                <Form.Item
                    label="图标选择"
                    className='OneFormItem'
                    name="TextArea"
                    rules={[{ required: true, message: '必填提示!' }]}
                >
                    <div className='SelectIconBox'>
                        {Object.keys(ICONMapping).map(key =>
                            <div key={key}>{ICONMapping[key]}</div>
                        )}
                    </div>
                </Form.Item>
                <div className="BtnFormItem">
                    <Button type="primary" htmlType="submit">
                        提交
                    </Button>
                </div>
            </Form>
        </div>
    );
};

export default FormTemplate;